<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo">
        <div>
            <button @click="add">在前面添加一个</button>
            <button @click="remove">删除一个</button>
            <button @click="sort">升序排列</button>
        </div>
        <h2>使用id作为key值</h2>
        <ul>
            <li v-for="person in persons" :key="person.id">
                {{person.id}}---{{person.name}}---{{person.age}}--<input/>
            </li>
        </ul>
        <h2>使用index作为key值</h2>
        <ul>
            <li v-for='(person,index) in persons' :key="index">
                {{person.id}}---{{person.name}}---{{person.age}}--<input/>
            </li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                persons:[
                    {id:1,name:'zhangsan',age:13},
                    {id:2,name:'lisi',age:14}
                ]
            },
            methods:{
                // 添加
                add(){
                    this.persons.unshift({id:this.persons.length + 1,name:'wangwu',age:15})
                },
                remove(){
                    this.persons.shift()
                },
                sort(){
                    this.persons.sort((p1,p2)=>p1.age - p2.age)
                }
            }
        })
        /* 
        1.为什么要使用key，在什么时候使用，key有什么作用
        key在虚拟DOM 中使用，作为虚拟DOM的标识，在更新的时候key起这横很重要的作用
        2）详细的说：当列表数组中的数据发生变化生成新的虚拟DOM时,React进行新旧虚拟的DOM的diff比较
            -当找得到对应的key
                item数据没有变，直接使用原来的真实DOM
                item的数据改变了，就进行真实DOM的数据更新
            -没有找到对应的key
                根据item数据创建的新的真实DOM显示

        2.key使用id和index有什么区别
            
        */
    </script>
</body>
</html>